<template>
    <view class="content">
        <view class="nav">
            <view class="nav-i" :class="{active : type == 1}" @click="chooseNav(1)">未使用</view>
            <view class="nav-i" :class="{active : type == 2}" @click="chooseNav(2)">已使用</view>
            <view class="nav-i" :class="{active : type == 3}" @click="chooseNav(3)">已过期</view>
        </view>
        
        <view class="wrapper">
            <view class="item" v-for="(item, index) in list" :key="index">
                <image src="/static/image/cou_bg.png" class="cou-bg"></image>
                <view class="item-cou">
                    <view class="item-cou-l">
                        <view>
                            <text class="cou-num">{{item.money}}</text>
                            <text>元</text>
                        </view>
                        <view>满{{item.full_money}}可用</view>
                    </view>
                    <view class="item-cou-r">
                        <view class="u-flex-1">
                            <view class="u-font-30 u-p-b-5 text-bold">{{item.name}}</view>
                            <view class="cou-time">有效期至{{item.end_time}}</view>
                            <!-- <view class="cou-time">本券剩余3张</view> -->
                        </view>
                        <view class="cou-btn" v-if="type == 1" @click="$sTo(`/pages/tabbar/index`)">立即使用</view>
                        <image src="../../static/image/us_img_07.png" class="us-img-07" v-if="type == 2"></image>
                        <image src="../../static/image/us_img_08.png" class="us-img-07" v-if="type == 3"></image>
                    </view>
                </view>
            </view>
            
            <view style="height: 94rpx;padding-top: 30rpx;">
                <u-loadmore :status="status" v-if="status != 'loadmore'" />
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: 1,
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
            };
        },
        onLoad() {
            this.getList()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
            chooseNav(num) {
                if (this.type = num) return
                this.type = num
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            },
            
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('user_coupon', {
            		user_token: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
                    status: this.type,//0未领取 1未使用 2已使用 3已过期
                    money: '',//订单金额 满足使用条件
            	}).then(ret => {
            		if (ret.success == 1000) {
            			if (ret.detail && ret.detail.coupon && ret.detail.coupon.length > 0) {
            				this.list = this.list.concat(ret.detail.coupon);
            				this.page++;
            				this.status = 'loadmore'
            			} else {
            				this.status = 'nomore'
            			}
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
        border-top: 2rpx solid #e6e6e6;
    }
    
    .nav{
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav-i{
        width: calc(100vw / 3);
        padding: 30rpx 0;
        font-size: 28rpx;
        text-align: center;
    }
    .active{
        font-size: 32rpx;
        font-weight: bold;
        color: #f29700;
        border-bottom: 2rpx solid #f29700;
    }
    .wrapper{
        padding: 20rpx;
    }
    .item{
        position: relative;
        margin-bottom: 20rpx;
    }
    .cou-bg{
        width: 706rpx;
        height: 165rpx;
    }
    .item-cou{
        width: 687rpx;
        height: 165rpx;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        left: 20rpx;
        top: 0;
    }
    .item-cou-l{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .cou-num{
        font-size: 44rpx;
        font-weight: bold;
    }
    .item-cou-r{
        padding-left: 50rpx;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cou-time{
        font-size: 24rpx;
        color: #636363;
    }
    .cou-btn{
        font-size: 25rpx;
        color: #fff;
        padding: 15rpx 20rpx;
        background-color: #f29700;
        border-radius: 50rpx;
        margin-right: 20rpx;
    }
    .us-img-07{
        width: 154rpx;
        height: 123rpx;
        position: absolute;
        bottom: -30rpx;
        right: -25rpx;
        z-index: 9;
    }

</style>
